Score Breakdown Popup on Hover for Each User#40
Conversation
|
Resolves #20 |
|
yeah sure! I will work on it |
|
Resolves #20 |
jagdish-15
left a comment
There was a problem hiding this comment.
One thing I noticed is that the tooltip still remains visible when moving the cursor from the score onto the tooltip itself. Since the tooltip doesn't contain any interactive elements, I'd still prefer it to disappear as soon as the cursor leaves the score text.
Also, the feature is currently quite difficult to discover unless a user accidentally hovers over a score. Do you have any ideas for a subtle visual cue that indicates additional information is available, such as a small info icon or something similar? This isn't a hard requirement from the original issue, but I'd be interested in hearing your thoughts.
…es the score text
|
One subtle idea could be to add a small downward caret next to each score value, for example: 245 ▾ Many websites use a caret/chevron to indicate that additional information is available on hover or interaction. Since the score column already has an info icon explaining the scoring formula, the caret would specifically suggest that each individual score has its own details available, without adding much visual clutter to the leaderboard. |
|
That sounds like a reasonable and clean approach! Feel free to go ahead with the caret indicator. Also, please make sure the interaction works well on mobile devices. Once that's in place, I think we'll be in a good position to merge. |
Updated HTML leaderboard to remove down caret icon.
|
Thanks for working through all the feedback on this one! I took the liberty of making one small tweak before merging and changed the caret indicator to a |

What was added
Added a score tooltip feature to improve user understanding of score values in the score/leaderboard component.
Purpose
The tooltip provides additional contextual information when users hover over or interact with score elements, making the UI more informative and user-friendly.
Changes made
Impact
Improves user experience by making score information clearer, more interactive, and easier to understand.
Screenshots
Attached screenshots show the tooltip behavior in both default and hover states.